<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>

<title>首页</title>
</head>

<body>
	<h3>index</h3>
	
	<div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="privateConnect" onclick="privateConnect();">私人连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>
    <div id="conversationDiv">
        <label>输入你的名字</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">发送</button>
        <button id="sendNameQuene" onclick="sendNameQuene();">发送队列</button>
        <p id="response"></p>
    </div>
    
	<p id="response"></p>
	
	<script type="text/javascript" src="/webResources/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/SockJS/sockjs.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/stompJs/stomp.js"></script>
	
	<script type="text/javascript">
	    var stompClient = null;
	
	    function setConnected(connected) {
	    	document.getElementById('connect').disabled = connected;
	    	document.getElementById('privateConnect').disabled = connected;
	        document.getElementById('disconnect').disabled = !connected;
	        $('#response').html();
	    }
	
	    function connect() {
	        var socket = new SockJS('/endpointWisely'); //链接SockJS 的endpoint 名称为"/endpointWisely"
	        stompClient = Stomp.over(socket);//使用stomp子协议的WebSocket 客户端
	        stompClient.connect('guest', 'guest', function(frame) {//链接Web Socket的服务端。
	            setConnected(true);
	            console.log('Connected: ' + frame);
	            stompClient.subscribe('/topic/broadcast', function(respnose){ //订阅/topic/broadcast 目标发送的消息。
	                showResponse(JSON.parse(respnose.body).responseMessage);
	            });
	        });
	    }
	    
	    function privateConnect() {
	        var socket = new SockJS('/endpointWisely'); //链接SockJS 的endpoint 名称为"/endpointWisely"
	        stompClient = Stomp.over(socket);//使用stomp子协议的WebSocket 客户端
	        stompClient.connect({}, function(frame) {//链接Web Socket的服务端。
	            setConnected(true);
	            console.log('Connected: ' + frame);
	            stompClient.subscribe('/user/queue/private', function(respnose){ //订阅/queue/private 目标发送的消息。
	                showResponse(JSON.parse(respnose.body).responseMessage);
	            });
	        });
	    }
	
	    function disconnect() {
	        if (stompClient != null) {
	            stompClient.disconnect();
	        }
	        setConnected(false);
	        console.log("Disconnected");
	    }
	
	    function sendName() {
	        var name = $('#name').val();
	        stompClient.send("/welcome", {}, JSON.stringify({ 'name': name }));
	    }
	    
	    function sendNameQuene() {
	        var name = $('#name').val();
	        stompClient.send("/welcomeQuene", {}, JSON.stringify({ 'name': name }));
	    }
	
	    function showResponse(message) {
	          var response = $("#response");
	          response.html(message);
	    }
	</script>
</body>

</html>